<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<form action="">
			<div>用户名： <input type="text" name="username" id="" v-model='username' v-on:keyup.delete='clearContent'></div>
			<div>密码： <input type="password" name="password" id="" v-model='pwd' v-on:keyup.enter='handleSubmit'></div>
			<div><input type="button" value="vue提交" v-on:click='handleSubmit'></div>

		</form>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
		/*
			事件绑定-按键修饰符：

		*/
		var vm = new Vue({
			el: "#app",
			data: {
				username: '',
				pwd: ''
			},
			methods: {
				handleSubmit: function() {
					console.log(this.username, this.pwd)
				},
				// 按下delete键的时候，清空用户名
				clearContent: function() {
					this.username = '';
				}
			}
		})
	</script>
</body>
</html>